<%@ include file="/common/taglibs.jsp"%>
<%@ page language="java" pageEncoding="utf8"%>
<div id="type_spec_tmpl" style="display: none;">
	<div class="row">
		<div style="text-align: center;" class="p_name span-3">
			#name#
			<input type="hidden" value="" name="goodsTypeSpecs[#####].tsrId" />
			<input type="hidden" value="" name="goodsTypeSpecs[#####].typeId" />
			<input type="hidden" value="-----"
				name="goodsTypeSpecs[#####].specId" />
		</div>
		<div style="text-align: center;" class="p_type span-5">
			<select name="goodsTypeSpecs[#####].specStyle">
				<option value="1">
					可筛选-平铺显示
				</option>
				<option value="2">
					可筛选-下拉显示
				</option>
				<option value="3">
					不作为筛选项
				</option>
			</select>
		</div>
		<div style="text-align: center;" class="p_optionalias span-5">
			<img class="operater"
				src="<c:url value="/images/statics/icons/icon_delete.gif"/>"
				onclick="delTypeSpec(this,null)"
				style="cursor: pointer;" />
		</div>
		<div style="clear: both;"></div>
	</div>
</div>
<div id="props_tmpl" style="display: none;">
	<div class="row">
		<div class="p_name span-6">
			<input name="goodsTypeAttributes[#####].taId" type="hidden" />
			<input name="goodsTypeAttributes[#####].name"   class="{required:true,  messages:{required:'必填 '}  }" />
		</div>
		<div class="p_type span-5">
			<select onchange="changePropsType(this)"
				name="goodsTypeAttributes[#####].attributeType">
				<optgroup label="选择项">
					<option value="2">
						选择项 - 渐进式筛选
					</option>
					<option value="3">
						选择项 - 下拉筛选
					</option>
					<option value="4">
						选择项 - 不可筛选
					</option>
				</optgroup>
				<optgroup label="输入项">
					<option value="0">
						输入项 - 可搜索
					</option>
					<option value="1">
						输入项 - 不可搜索
					</option>
				</optgroup>
			</select>
		</div>
		<div class="p_optionalias span-10">
			<input name="goodsTypeAttributes[#####].options" style="width: 85%;" class="{required:true,  messages:{required:'必填 '}}" />
		</div>
		<div class="p_optionalias span-5">
			<input type="text" name="goodsTypeAttributes[#####].showOrder"  class="{required:true,number:true,  messages:{required:'必填 ',number:'请填入数字'}}" 
				style="width: 50%;" class="x-input " />
		</div>
		<div onclick="delProps(this,null)"
			style="text-align: center; color: red; cursor: pointer;"
			class="p_btn span-1">
			<img
				style="width: 16px; height: 16px; background-position: 0pt -214px;"
				class="imgbundle" src="<c:url value="/images/transparent.gif"/>"
				alt="删除" title="删除" />
		</div>
		<div style="clear: both;"></div>
	</div>
</div>
<div id="parameter_tmpl" style="display: none;">
	<div style="border: 1px solid rgb(199, 219, 229); margin: 0pt 0pt 5px;"
		class="tableform">
		参数组名称:
		<input id="params_#####" name="gdTypeParameters[#####].name" />
		<span class='sysiconBtn addorde' onclick='addParaItem(#####)'>为这个参数组添加一个参数</span>
		<span onclick='delParaGroup(this)' class="sysiconBtn delete">删除此参数组</span>
		<div class="division">
			<ul id="params_item_#####">
			</ul>
		</div>
	</div>
</div>
<div id="dialog-form" title="添加规格">
	<div class="dialog-content-body" style="">
		<div id="spec_select" style="margin: 2px;" class="tableform">
			<table width="100%" cellspacing="0" cellpadding="0" border="0">
				<tbody>
					<tr>
						<td width="35%" style="vertical-align: top;">
							<h4>
								请选择规格
							</h4>
							<div style="margin: 2px;" class="division">
								<p style="margin: 3px; padding: 0pt;">
									<input type="text" value="搜索规格..." style="display: none;"
										id="spec-select-search-input"
										class="spec_select_search shadow" />
									<input type="hidden" value="" id="type_spec_selected" />
									<input type="hidden" value="" id="type_spec_selected_name" />
								</p>
								<div style="height: 240px; overflow: auto;" class="spec_search">
									<ul class="g-menu-sec">
										<c:forEach var="list" items="${goodsSpecifications}"
											varStatus="vs">
											<li>
												<label>
													<input type="hidden" id="specShowType_${list.specId }"
														value="${list.specShowType}" />
													<input type="hidden" id="specType_${list.specId }"
														value="${list.specType }" />
													<input type="radio" name="type_spec_select"
														value="${list.specId}"
														onclick="showSpecValue(${list.specId},'${list.specName}','${list.specDescription}')" />
													${list.specName}
												</label>
												[${list.specDescription}]
											</li>
										</c:forEach>


									</ul>
								</div>
							</div>
							<div style="text-align: center;">
								没有找到需要的规格？
								<span class="sysiconBtn addorder addspec">添加新规格</span>
							</div>
						</td>
						<td width="70%" style="vertical-align: top;">
							<h4>
								规格预览区
							</h4>
							<div style="margin: 2px;" class="division">
								<div class="clearfix" id="sel-spec-value-area">
									<h5 id="spec_name"></h5>
									<p id="spec_desc"></p>
									<ul class="goods-spec-box" id="spec_value"></ul>
								</div>
							</div>
						</td>
					</tr>
					<tr>
					</tr>
				</tbody>
			</table>
			<div style="width: 60px; height: 40px; margin: 0pt auto;"
				class="mainFoot">
				<div class="table-action">
					<button class="btn" type="button" id="addTypeSpec-btn">
						<span><span>确定</span> </span>
					</button>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript"
	src="<c:url value='/scripts/jquery-1.4.2.js'/>"></script>
<script type="text/javascript"
	src="<c:url value='/scripts/ui/jquery.ui.core.js'/>"></script>
<script type="text/javascript"
	src="<c:url value='/scripts/ui/jquery.ui.widget.js'/>"></script>
<script type="text/javascript"
	src="<c:url value='/scripts/ui/jquery.ui.mouse.js'/>"></script>
<script type="text/javascript"
	src="<c:url value='/scripts/ui/jquery.ui.button.js'/>"></script>
<script type="text/javascript"
	src="<c:url value='/scripts/ui/jquery.ui.draggable.js'/>"></script>
<script type="text/javascript"
	src="<c:url value='/scripts/ui/jquery.ui.position.js'/>"></script>
<script type="text/javascript"
	src="<c:url value='/scripts/ui/jquery.ui.resizable.js'/>"></script>
<script type="text/javascript"
	src="<c:url value='/scripts/ui/jquery.ui.dialog.js'/>"></script>
<script type="text/javascript"
	src="<c:url value='/scripts/ui/jquery.effects.core.js'/> "></script>


<script type="text/javascript">
		String.prototype.replaceAll = function(s1, s2) {
			return this.replace(new RegExp(s1, "gm"), s2);
		}
		
		
		
	$(function() {
		
		$("#dialog").dialog("destroy");		
		$("#dialog-form").dialog({
			autoOpen: false,
			height: 450,
			width: 750,
			modal: true,
			
			close: function() {
				$(this).dialog('close');
			}
		});
		
		
		
		$('#addSpec-btn').click(function() {
				$('#dialog-form').dialog('open');
		});
		
		
		
		var typeSpecIndex = ${fn:length(goodsTypeSpecs)};
		$('#addTypeSpec-btn').click(function() {
				
				var type_spec  = $("#type_spec_selected").val();
				var type_spec_name  = $("#type_spec_selected_name").val();
				var tmpl = $('#type_spec_tmpl').html();
				tmpl = tmpl.replaceAll('#####', typeSpecIndex);
				tmpl = tmpl.replaceAll('-----', type_spec);
				tmpl = tmpl.replaceAll('#name#', type_spec_name);
				typeSpecIndex++;

				$('#spec_box').append(tmpl);
		
				$('#dialog-form').dialog('close');
		});
		

	});
	
	
	function showSpecValue(specId,specName,specDesc) {
		var url = "gd_specValue_list.html";
		var params = {
			"specId" : specId
		};
		
		$("#type_spec_selected").val(''+specId);
		$("#type_spec_selected_name").val(''+specName);
		
		$.getJSON(url, params, 
			function callback(data) 
			{	
			
				$("#spec_value").html('');
				var type = $('#specType_'+specId).val();
                var specValues = data.goodsSpecValuess;
				$.each( specValues, function(i, n){  				
					
  					if(type==2){
  						$('<li style="cursor: default;"><img width="30" height="30"  src="'+specValues[i].specImage+'"></li>').appendTo("#spec_value");
  					}else{
  						$('<li style="cursor: default;"><span>'+specValues[i].specValue+'</span></li>').appendTo("#spec_value");
  					}
  								
  				});
  				var showType = $('#specShowType_'+specId).val();
  				var showTypeStr='';
  				if(showType==1){
  					showTypeStr='平铺显示';
  				}else{
  					showTypeStr='下拉显示';
  				}
  				
				$('#spec_name').html(specName);
  				$('#spec_desc').html(specDesc+'&nbsp;[显示方式：'+showTypeStr+']');
				
			}
		);
	}
	
	

	
	var propsIndex = ${fn:length(goodsTypeAttributes)};
	
	function addProps() {
		var tmpl = $('#props_tmpl').html();
		tmpl = tmpl.replaceAll('#####', propsIndex);
		propsIndex++;

		$('#props_box').append(tmpl);
	}

	function delProps(obj,typeAttrId) {
		if(!confirm('确认要删除吗？')){
			return;		
		} 
		if(typeAttrId==null){
			$(obj).parent().remove();	
		}else{
			var url = "gd_typeAttribut_delete.html";
			var params = {
				"taId" : typeAttrId
			};

			$.getJSON(url, params, 
				function callback(data) 
				{							
					 
					$(obj).parent().remove();
				}
			);
		
		}
			
	}
	//no single record,so donot need del record in db.
	function delParaGroup(obj) {
		if(!confirm('确认要删除吗？')){
			return;		
		} 
		$(obj).parent().remove();
	}
	
	function delParaItem(obj) {
		if(!confirm('确认要删除吗？')){
			return;		
		} 
		$(obj).parent().remove();
	}
	
	function delTypeSpec(obj,typeSpecId){
	
		if(!confirm('规格删除后将会影响商品列表页显示效果，确认要删除吗？')){
			return;		
		} 
		if(typeSpecId==null){
			$(obj).parent().parent().remove();	
		}else{
			var url = "gd_typeSpec_delete.html";
			var params = {
				"tsrId" : typeSpecId
			};

			$.getJSON(url, params, 
				function callback(data) 
				{							
					 
					$(obj).parent().parent().remove();	
				}
			);
		}
		
		
	}

	var paraGroupIndex = ${fn:length(gdTypeParameters)};
	var paraItemIndex = [];
	
	<c:forEach var="list" items="${gdTypeParameters}" varStatus="indexList">
	paraItemIndex[${indexList.index}]=${fn:length(list.child)};		
	</c:forEach>
	
	
	
	
	function addParaGroup() {
		var tmpl = $('#parameter_tmpl').html();
		tmpl = tmpl.replaceAll('#####', paraGroupIndex);		
		paraItemIndex[paraGroupIndex]=0;		
		paraGroupIndex++;
		$('#params_box').append(tmpl);
	}
	
	
	
	
	function addParaItem(ind) {
		var tmpl = '<li>参数名：<input size="15" name="gdTypeParameters[#####].child[-----].name"><span onclick="delParaItem(this)"><img style="width: 16px; height: 16px; background-position: 0pt -214px;" class="imgbundle" src="<c:url value="/images/transparent.gif"/>"  ></span></li>';
		tmpl = tmpl.replaceAll('#####', ind);
		tmpl = tmpl.replaceAll('-----', paraItemIndex[ind]);
		paraItemIndex[ind]++;

		$('#params_item_'+ind).append(tmpl);
	}
	
	
	
	function showDetail(){
		var type_brand  =${goodsType.brandUsed};
		var type_attr  =${ goodsType.attributeUsed};
		var type_para  =${ goodsType.parameterUsed};
		
		if(type_brand){
			$('#type_brands').css('display','');
		}else{
			$('#type_brands').css('display','none');
		}
		if(type_attr){
			$('#type_attribute').css('display','block');
		}else{
			$('#type_attribute').css('display','none');
		}
		if(type_para){
			$('#type_parameter').css('display','block') ;
		}else{
			$('#type_parameter').css('display','none') ;
		}
	
	}
	
	function changePropsType(obj){
	}
	
	
	function showTypeBrand(type_brand){
		if(type_brand){
			$('#type_brands').css('display','');
		}else{
			$('#type_brands').css('display','none');
		}
	}
	
	function showTypeAttr(type_attr){
	 	if(type_attr){
			$('#type_attribute').css('display','block');
		}else{
			$('#type_attribute').css('display','none');
		}
	}
	function showTypePara(type_para){
		if(type_para){
			$('#type_parameter').css('display','block') ;
		}else{
			$('#type_parameter').css('display','none') ;
		}
	}
	
	showDetail();
</script>




<script type="text/javascript"		src="<c:url value='/scripts/jquery.validate.js'/>"></script>
<script type="text/javascript"		src="<c:url value='/scripts/jquery.metadata.js'/>"></script>
<script  type="text/javascript">
	

$(document).ready(function() {
 	var validator = $("#edit_type_form").validate({
		errorElement: "div" ,
		errorClass: "x-vali-error",
		onfocusout: false,
		rules: {
			'goodsType.name' :	"required"
			
		},
		messages: {
			'goodsType.name': "必填字段"
		},
		// the errorPlacement has to take the table layout into account
		errorPlacement: function(error, element) {
			element.removeClass('x-vali-error');
			error.appendTo( element.parent());
			
			
		},
		// specifying a submitHandler prevents the default submit, good for the demo
		//submitHandler: function() {
		//	alert("submitted!");
		//},
		// set this class to error-labels to indicate valid fields
		success: function(div) {			
			//label.html("&nbsp;").addClass("checked");
			//alert(div.is()+'\t'+);
			$(div).remove();
		}
	});
});

</script>
